<template>
	<view>
		<view class="top">
			<block v-for="(item,index) in txt" :key="index">
				<icon class="icon-box-img" color="#8B0000" type="success" size="16"></icon>
				<text class="text">{{item}}</text>
			</block>
		</view>
		<view class="BBigbox">
			<!-- 商品列表 -->
			<view class="cart_ul">
				<view class="cart_li" v-for="item,index in cartList" :key="item.product_id">
					<!-- 左侧复选框 -->
					<view class="checkbox">
						</u-checkbox-group>
						<checkbox-group @change="checkboxChange(item.checked,item.product_id)" color="red">
							<label>
								<checkbox :checked="item.checked===1?true:false " :disabled="stepShow" />
							</label>
						</checkbox-group>

					</view>
					<!-- 右侧内容 -->
					<view class="cart_li_right_content">
						<!-- 滑动组件 -->
						<u-swipe-action>
							<u-swipe-action-item :options="options1" @click="del">
								<view class="swipe-action u-border-top u-border-bottom">
									<view class="swipe-action__content"
										@click.native="checkboxChange(item.checked,item.product_id)">
										<view class="imgs">
											<image :src="item.list_pic_url" style="width: 200rpx;" mode="widthFix">
											</image>
										</view>
										<view class="cart_li_text">
											<view class="content_right">
												{{item.goods_name}}
											</view>
											<view class="priceBox">
												<view class="price" v-show="!stepShow" style="	margin-top: 32rpx;">
													￥{{item.retail_price.toFixed(2)}}
												</view>
												<view class="step" ref="title">
													x{{item.number}}
												</view>
												<view class="steps" v-show="stepShow"
													style="margin-left: 80rpx;margin-top: 15rpx;">
													<u-number-box bgColor="#ccc" v-model="item.number"
														@change="onChange($event,item,index)">
													</u-number-box>
												</view>
											</view>
										</view>

									</view>
								</view>
							</u-swipe-action-item>
						</u-swipe-action>
						<view class="line"></view>
					</view>

				</view>

			</view>

		</view>

		<!-- 购物车为空提示 -->
		<view class="Toast" v-show="!cartList.length">
			<image src="http://www.52coding.cc/net163/img/custom-empty-image.276c05f0.png" mode="widthFix"
				style="width: 320rpx"></image>
			<view class="text">
				购物车为空
			</view>
		</view>


		<!-- 底部编辑 -->
		<view class="BottomBox" v-show="cartList.length">
			<!-- 编辑 -->
			<view class="edit">
				<view style="font-size: 24rpx;margin-left: 40rpx;">
					累计共计{{cartTotal.checkedGoodsCount}}件商品,可点击
				</view>
				<view class="center">
					<button v-show="!stepShow" @click="changeStepShow" class="btn"
						style="width: 120rpx; height:80rxp; font-size: 25rpx;">编辑</button>
					<button v-show="stepShow" @click="changeStepShow" class="btn"
						style="width: 160rpx; height:80rxp; font-size: 25rpx;background-color: red;">完成编辑</button>
				</view>
				<view style="font-size: 24rpx;">
					进行数量修改
				</view>
			</view>
			<!-- 购买 -->
			<view class="goumai">
				<view style="margin-top: 15rpx;font-size: 14rpx;flex: 1;">
					<checkbox-group @change="checkboxAllChange">
						<label>
							<checkbox :checked="cartTotal.checkedGoodsCount===cartTotal.goodsCount"
								:disabled="stepShow" />全选
						</label>
					</checkbox-group>
				</view>
				<view>
					<text style="font-size: 14rpx;">合计：</text><text
						style="font-size: 20px;color: #ee0a24;font-weight: 500;">￥{{total.toFixed(2)}}</text>
				</view>
				<view class="">
					<button
						style="margin-left: 20rpx;background: linear-gradient(to right,#ff6034,#ee0a24);font-size: 28rpx;border-radius:40rpx;color: aliceblue; width:200rpx;height: 80rpx;line-height: 80rpx;">立即购买</button>
				</view>


			</view>
		</view>

	</view>
</template>

<script>
	import {
		showCartListsAPI,
		changeCheckedAPI,
		addStepNumAPI,
		delCartAPI
	} from "../../request/api.js";
	import request from "../../request/request.js";
	export default {
		data() {
			return {
				txt: ["30天无忧退货 ", "48小时快速退费 ", "满88元免邮费 "],
				stepShow: false,
				checkboxValue1: [],
				options1: [{
					text: '删除',
					style: {
						backgroundColor: "red"
					}
				}],
				cartList: [],
				cartTotal: [],
				productIds: ""
			}
		},

		onShow() {
			if (uni.getStorageSync("token")) {
				// 方法参数为data,url,method，有顺序，不穿也要用空对象或者空字符占位
				this.requestPackaging({}, showCartListsAPI, "GET")
			}
		},
		computed: {
			total() {
				let sum = 0;
				this.cartList.forEach((item, index) => {
					if (item.checked == 1) {
						sum += item.number * item.retail_price
					}
				})
				return sum
			}
		},
		methods: {

			// 请求封装   反选方法内有展示不封装的写法
			// 方法参数为data,url,method，有顺序，不传也要用空对象或者空字符占位
			requestPackaging(data = {}, url, method = "GET") {
				request({
					// 对象简写 data:data 可以简写为 data
					data,
					method,
					url,
					successCallBack: (res) => {
						console.log(res)
						const {
							cartList,
							cartTotal
						} = res.data.data
						this.cartList = cartList
						this.cartTotal = cartTotal
					}
				})
			},

			// 步进器
			onChange(e, item, index) {
				// console.log(e.value),
				let data = {
					number: e.value,
					productId: item.product_id,
					goodsId: item.goods_id,
					id: item.id
				}
				// 调用封装好的请求方法传入对应参数 
				this.requestPackaging(data, addStepNumAPI, "POST")

			},

			// 点击编辑显示步进器
			changeStepShow() {
				this.stepShow = !this.stepShow
			},

			//单个选中
			checkboxChange(isChecked, productIds) {
				isChecked = isChecked == 1 ? 0 : 1
				let data = {
					isChecked,
					productIds
				};
				// 调用封装好的请求方法传入对应参数
				this.requestPackaging(data, changeCheckedAPI, "POST")

			}, // 全选

			// 反选
			checkboxAllChange() {
				let isChecked = ""
				let str = ""
				if ((this.cartTotal.checkedGoodsCount === this.cartTotal.goodsCount) && this.cartTotal.goodsCount != 0) {
					isChecked = 0
				} else {
					isChecked = 1
				}
				this.cartList.forEach((item, index) => {
					console.log(item.product_id)
					str += item.product_id + ","
				})
				// console.log(str.substring(1, str.length - 1))
				str = str.substring(0, str.length - 1)


				let data = {
					isChecked,
					productIds: str
				};
				// 调用封装好的请求方法传入对应参数
				// 封装请求函数写法
				this.requestPackaging(data, changeCheckedAPI, "POST")
				// 常规写法
				// request({
				// 	method: "POST",
				// 	url: changeCheckedAPI,
				// 	data: {
				// 		isChecked: isChecked,
				// 		productIds: str
				// 	},
				// 	successCallBack: (res) => {
				// 		console.log(res)
				// 		const {
				// 			cartList,
				// 			cartTotal
				// 		} = res.data.data
				// 		this.cartList = cartList
				// 		this.cartTotal = cartTotal
				// 		console.log(this.cartList)
				// 	}
				// })


			},

			// 删除
			del() {
				let str = ""
				this.cartList.forEach((item, index) => {
					// 选中的商品进行id拼接
					if (item.checked == 1) {
						str += item.product_id + ","
					}
				})
				// 将末尾多出的逗号删除 字符串截取
				str = str.substring(0, str.length - 1)

				// 调用封装好的请求方法传入对应参数
				// 封装请求函数写法
				let data = {
					productIds: str
				};
				this.requestPackaging(data, delCartAPI, "POST")
			}
		},



	}
</script>

<style lang="scss">
	.BottomBox {
		position: fixed;
		left: 0;
		right: 0;
		bottom: var(--window-bottom);
		z-index: 666;
		background-color: #fff;
	}

	.Toast {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 300rpx;

		.text {
			margin-top: 20rpx;
			color: #ccc
		}
	}

	.BBigbox {
		overflow-y: auto;
		height: 100vh;
	}

	.cart_ul {
		height: 2000rpx;
		position: relative;
		z-index: 665;
		margin-bottom: 200rpx;
		// background-color: #ccc;
	}

	.cart_li_text {
		flex: 1;
		padding-top: 48rpx;
		margin-right: 40rpx;
		width: 400rpx;
	}



	.cart_li {

		justify-content: space-between;
		display: flex;
		align-items: center;
		padding-left: 20rpx;

		.line {
			width: 100vw;
			margin-top: 20rpx;
			border-bottom: 1rpx solid #ccc;
			height: 1rpx;
		}

		.content_right {
			margin-top: 50rpxs;
		}

		.imsg {}

		.priceBox {

			margin-top: 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.price {
				margin-left: 60rpx;

			}

			.step {}
		}
	}

	.edit {
		align-items: center;
		display: flex;
		background-color: burlywood;
		color: darkred;

		.center {
			margin: 0 20rpx;

			.btn {
				height: 60rpx;
				width: 120rpx;
				font-size: 20rpx;
				background-color: green;
				color: #fff;
			}
		}

	}

	.top {
		height: 60rpx;
		display: flex;
		font-size: 26rpx;
		align-items: center;
		justify-content: space-evenly;
		background-color: #ececec;
	}

	.goumai {
		height: 120rpx;
		padding: 0 20rpx;
		align-items: center;
		display: flex;
		justify-content: space-between;
	}





	.u-page {
		padding: 0;
	}

	.u-demo-block__title {
		padding: 10px 0 2px 15px;
	}

	.swipe-action {
		height: 200rpx;

		// background-color: #ccc;

		&__content {
			padding: 25rpx 0;

			&__text {
				font-size: 15px;
				color: $u-main-color;
				padding-left: 30rpx;
			}
		}
	}

	/deep/ .u-swipe-action {
		width: 700rpx;



	}

	.u-border-bottom {
		border: none;
	}

	.u-border-top {
		border: none;
	}

	.swipe-action {
		height: 256rpx;
	}

	.u-swipe-action-item {
		border: none;
		// background-color: #ccc;
	}

	.swipe-action__content {
		justify-content: space-evenly;
		padding: 10rpx 0 30rpx 0;
		display: flex;
		margin: 20rpx 0;
		background-color: #f9f9f9;
	}



	.u-swipe-action-item-right {
		background-color: red !important;
		width: 400rpx;
	}

	.uni-checkbox-input {
		background-color: darkred !important;
	}



	.uni-checkbox-input-disabled {
		background-color: darkred !important;
	}
</style>
